<template>
    <div>
        <el-button @click="drawer = true">添加动画</el-button>
        <el-button @click="lookCom">预览动画</el-button>
    </div>

    <div class="mt10" v-for="(item, index) in store.styleItem.style.animate" :key="index">
        <el-tag>{{ item.label }}</el-tag>
    </div>


    <el-drawer v-model="drawer" title="I am the title" direction="ltr">
        <el-tabs v-model="activeAnimation" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in store.anm" :key="index" :label="item.label" :name="item.label">
                <el-scrollbar height="100%">
                    <el-row class="tac">
                        <el-col :span="6" v-for="itemChildren in item.children" :key="item">
                            <p :id="itemChildren.value" @mouseover="addAnimate(itemChildren.value)"
                                @click="addAnimateItem(itemChildren)" :class="['scrollbar-demo-item']">
                                {{ itemChildren.label }}
                            </p>
                        </el-col>
                    </el-row>
                </el-scrollbar>
            </el-tab-pane>
        </el-tabs>
    </el-drawer>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { userToolbarStore } from '../../store'

const store = userToolbarStore()
// 动画
const drawer = ref(false)
const activeAnimation = ref('进入')

const addAnimate = (ani) => {
    nextTick(() => {
        const html = document.getElementById(ani)
        let timer = null
        clearTimeout(timer)
        html.className = `scrollbar-demo-item animated ${ani}`
        timer = setTimeout(() => {
            html.className = `scrollbar-demo-item`
        }, 2000);
    })
}
// 往右侧数组追加动画
const addAnimateItem = (item) => {
    store.addAnimateItem(item)
}

// 预览动画
const lookCom=()=>{
    const html = document.getElementById(store.styleItem.id)
    let timer = null
    let timer2 = null
    store.styleItem.style.animate.forEach((item,index)=>{
        timer = setTimeout(() => {
        html.className = `animated ${item.value}`
        if (index === store.styleItem.style.animate.length-1) {
                timer2 = setTimeout(() => {
                    html.className = ``
                }, 1500);
            }
        }, index*1000);
    })
}

</script>

<style scoped>
.mt10 {
    margin-top: 10px;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    cursor: pointer;
    font-size: 12px;
}
</style>